<template>
  <div class="dashboard-container">
    <!-- <div class="a" />
    <div class="b" />
    <div class="c" /> -->
    <svg-icon icon-class="form" />
    <div class="dashboard-text">name: {{ name }}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',

  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
// .dashboard {
//   &-container {
//     margin: 30px;
//   }
//   &-text {
//     font-size: 30px;
//     line-height: 46px;
//   }
// }
@mixin mybox {
  height: 100px;
  width: 100px;
  margin: 5px;
  &:hover{
    transform: translateY(-10px)

  }
}
.a {
    @include mybox;
    background-color: red;
}
.b {
    @include mybox;
    background-color: rebeccapurple;
}
.c {
    @include mybox;
    background-color: aqua;
}
</style>
